<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-card class="box-card">
      <div class="query-card">
        <!-- <el-row type="flex" align="middle">
        <el-col :span="12">-->
        <div class="grid-content bg-purple search">
          <el-form ref="query" :model="query" label-width="100px">
            <el-form-item style="margin-bottom:0px" label="手机号">
              <i slot="label" class="el-icon-search" style="font-size:20px"></i>
              <el-input style="width:260px" v-model="query.keywords" placeholder="请输入手机号搜索"></el-input>
            </el-form-item>
            <el-form-item style="margin-bottom:0px" label="操作日期">
              <el-date-picker
                ref="picker"
                v-model="query.timeArr"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
              ></el-date-picker>
            </el-form-item>
            <el-form-item style="margin-bottom:0px" label="赠送物品">
              <el-select v-model="query.type" placeholder="请选择赠送物品">
                <el-option label="全部" value="0"></el-option>
                <el-option label="商品" value="1"></el-option>
                <el-option label="余额" value="2"></el-option>
                <el-option label="积分" value="3"></el-option>
                <el-option label="删除赏袋" value="4"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="margin-bottom:0px" label="赠送类型">
              <el-select v-model="query.givetype" placeholder="请选择赠送类型">
                <el-option label="全部" value="0"></el-option>
                <el-option label="充值" value="1"></el-option>
                <el-option label="赠送" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="margin-bottom:0px" label="赠送状态">
              <el-select v-model="query.status" placeholder="请选择赠送状态">
                <el-option label="全部" value="0"></el-option>
                <el-option label="待审核" value="1"></el-option>
                <el-option label="同意" value="2"></el-option>
                <el-option label="拒绝" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <!-- </el-col> -->
        <!-- <el-col :span="12"> -->
        <div class="grid-content bg-purple-light">
          <el-button type="primary" @click="queryAsk">查询</el-button>
          <el-button @click="queryReset">重置</el-button>
        </div>
        <!-- </el-col>
        </el-row>-->
      </div>
    </el-card>

    <!-- 表格 -->
    <el-card class="box-card" v-loading="loading">
      <img
        class="watermark"
        v-if="baseApi== 'https://testouhun.wm2177.com'"
        style="right: 0;"
        src="@/assets/watermark.png"
      />

      <el-button type="primary" style="margin-bottom:20px" @click="addList">添加</el-button>

      <el-table
        :data="tableData"
        border
        style="width: 100%;margin-bottom: 20px;"
        v-loading="loading"
        :header-cell-style="{background:'#eee'}"
      >
        <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
        <el-table-column align="center" prop="nickname" label="用户昵称"></el-table-column>
        <el-table-column align="center" prop="mobile" label="手机号"></el-table-column>
        <el-table-column align="center" prop="data" label="余额"></el-table-column>
        <el-table-column align="center" label="充值类型">
          <template slot-scope="scope">
            <div v-if="scope.row.give_type==1">充值</div>
            <div v-if="scope.row.give_type==2">赠送</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="赠送背包方式">
          <template slot-scope="scope">
            <div v-if="scope.row.bag_type==1">背包</div>
            <!-- <div v-if="scope.row.bag_type==2">宝箱</div> -->
          </template>
        </el-table-column>
        <el-table-column align="center" label="加减类型">
          <template slot-scope="scope">
            <div v-if="scope.row.in_type==1">加</div>
            <div v-if="scope.row.in_type==2">减</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="加减类型">
          <template slot-scope="scope">
            <div v-if="scope.row.in_type==1">加</div>
            <div v-if="scope.row.in_type==2">减</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="赠送物品">
          <template slot-scope="scope">
            <div v-if="scope.row.type==1">商品</div>
            <div v-if="scope.row.type==2">余额</div>
            <div v-if="scope.row.type==3">积分</div>
            <div v-if="scope.row.type==4">删除赏袋</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="赠送类型">
          <template slot-scope="scope">
            <div v-if="scope.row.give_type==0">全部</div>
            <div v-if="scope.row.give_type==1">充值</div>
            <div v-if="scope.row.give_type==2">赠送</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="赠送/删除信息">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.type==1" placement="right" trigger="click">
              <el-table :data="scope.row.goods_data">
                <el-table-column align="center" width="180" property="goods_name" label="商品名称"></el-table-column>
                <el-table-column align="center" property="num" label="数量"></el-table-column>
                <el-table-column align="center" property="price" label="价格"></el-table-column>
              </el-table>
              <el-button slot="reference">{{scope.row.goods_data.length+'件'}}</el-button>
            </el-popover>
            <el-popover v-else-if="scope.row.type==4" placement="right" trigger="click">
              <el-table :data="del_data">
                <el-table-column align="center" width="180" property="goods_name" label="商品名称"></el-table-column>
                <el-table-column align="center" property="price" label="价格"></el-table-column>
              </el-table>
              <el-button slot="reference" @click="getDelInfo(scope.row.id)">{{"点击查看"}}</el-button>
            </el-popover>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="add_time" label="添加时间"></el-table-column>
        <el-table-column align="center" prop="add_time" label="添加时间"></el-table-column>
        <el-table-column align="center" prop="admin_name" label="操作人"></el-table-column>
        <el-table-column align="center" prop="examine_name" label="审批人"></el-table-column>
        <el-table-column align="center" label="审批状态">
          <template slot-scope="scope">
            <div v-if="scope.row.status==1">待审核</div>
            <div v-if="scope.row.status==2">同意</div>
            <div v-if="scope.row.status==3">拒绝</div>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align:right">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="currentPage"
          :total="total"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </el-card>

    <!-- 抽屉 -->
    <el-drawer
      title="添加赠送"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <el-form style="margin-left:20px" ref="form" :model="form" label-width="80px">
        <el-form-item label="选择用户">
          <el-button type="primary" @click="chooseUser">选择用户</el-button>
        </el-form-item>
        <el-form-item label="用户" v-if="username">
          <el-tag type="success">{{username+" "+usermobile}}</el-tag>
        </el-form-item>
        <el-form-item label="赠送类型">
          <el-radio-group v-model="form.type">
            <el-radio label="1">商品</el-radio>
            <el-radio label="2">余额</el-radio>
            <el-radio label="3">积分</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="赠送数量" v-if="form.type==2||form.type==3">
          <el-input style="width:360px" v-model="form.data" placeholder="请填写赠送数量"></el-input>
        </el-form-item>
        <el-form-item label="加减类型" v-if="form.type==2||form.type==3">
          <el-select style="width:360px" v-model="form.in_type" placeholder="请选择加或减">
            <el-option label="加" value="1"></el-option>
            <el-option label="减" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="充值类型" v-if="form.type==2">
          <el-select style="width:360px" v-model="form.give_type" placeholder="请选择充值类型">
            <el-option label="充值" value="1"></el-option>
            <el-option label="赠送" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="背包方式" v-if="form.type==1">
          <el-select style="width:360px" v-model="form.bag_type" placeholder="请选择背包方式">
            <el-option label="背包" value="1"></el-option>
            <!-- <el-option label="宝箱" value="2"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="选择奖品" v-if="form.type==1">
          <el-button type="primary" @click="addRewards">选择奖品</el-button>
        </el-form-item>
        <el-form-item label="奖品列表" v-if="form.type==1&&form.goods_data.length">
          <!-- <el-tag
            style="margin-right:10px"
            type="success"
            v-for="item in form.goods_data"
            :key="item.goods_id"
          >{{item.goods_name+" "+item.price}}</el-tag>-->
          <el-table :data="form.goods_data" style="width: 100%">
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" style="color: red;" @click="del_goods(scope.row)">删除</el-button>
              </template>
            </el-table-column>
            <el-table-column align="center" label="奖品图片">
              <template slot-scope="scope">
                <el-popover placement="top-start" title trigger="hover">
                  <img :src="scope.row.img" alt style="max-width:150px" />
                  <!-- <el-avatar shape="square" :size="150" fit="cover" :src="scope.row.img"></el-avatar> -->
                  <el-avatar
                    slot="reference"
                    shape="square"
                    :size="50"
                    fit="scale-down"
                    :src="scope.row.img"
                  ></el-avatar>
                  <!-- <img
                slot="reference"
                :src="scope.row.img"
                style="width: 60px;height: 60px"
                  />-->
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="goods_name" label="名称"></el-table-column>
            <el-table-column align="center" prop="price" label="价格"></el-table-column>
            <el-table-column align="center" prop="num" label="赠送数量">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.num" :min="1" label="赠送数量"></el-input-number>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button @click="onCancle">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <!-- 用户列表 -->
    <el-dialog
      title="选择用户"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="dialoghandleClose"
    >
      <!-- 搜索 -->
      <el-card class="box-card">
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple search">
              <el-form ref="sendQuery" :model="sendQuery" label-width="100px">
                <el-form-item style="margin-bottom:0px" label="名称">
                  <el-input style="width:360px" v-model="sendQuery.keywords" placeholder="用户名称"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light" style="text-align:right">
              <el-button type="primary" @click="sendQueryAsk">查询</el-button>
              <el-button @click="sendQueryReset">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="box-card">
        <el-table
          :data="sendData"
          ref="sendmultipleTable"
          border
          tooltip-effect="dark"
          style="width: 100%;margin-bottom: 20px;"
          @row-click="sendhandleSelectionChange"
          :header-cell-style="{background:'#eee'}"
          highlight-current-row
        >
          <el-table-column align="center" width="55">
            <template slot-scope="scope">
              <el-radio v-model="form.user_id" :label="scope.row.id">{{""}}</el-radio>
            </template>
          </el-table-column>
          <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
          <el-table-column align="center" label="头像">
            <template slot-scope="scope">
              <el-popover placement="top-start" title trigger="hover">
                <img :src="scope.row.himg" alt style="max-width:150px" />
                <!-- <el-avatar shape="square" :size="150" fit="cover" :src="scope.row.img"></el-avatar> -->
                <el-avatar
                  slot="reference"
                  shape="square"
                  :size="50"
                  fit="scale-down"
                  :src="scope.row.himg"
                ></el-avatar>
                <!-- <img
                slot="reference"
                :src="scope.row.img"
                style="width: 60px;height: 60px"
                />-->
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="nickname" label="昵称"></el-table-column>
          <el-table-column align="center" prop="name" label="真实姓名"></el-table-column>
          <el-table-column align="center" prop="mobile" label="手机号"></el-table-column>
        </el-table>
        <div style="text-align:right">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page="sendCurrentPage"
            :total="sendTotal"
            @current-change="sendCurrentChange"
          ></el-pagination>
        </div>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 奖品列表 -->
    <el-dialog
      title="选择奖品"
      :visible.sync="rewarddialogVisible"
      width="60%"
      :before-close="rewarddialoghandleClose"
    >
      <el-form style="display:flex" ref="query" :model="rewardquery" label-width="80px">
        <el-form-item label="奖品名称">
          <el-input style="width:260px" v-model="rewardquery.keywords" placeholder="请输入奖品名称"></el-input>
        </el-form-item>
        <el-form-item label="价格区间">
          <el-input v-model="rewardquery.lowPrice" style="width:50px" placeholder="低"></el-input>-
          <el-input v-model="rewardquery.heightPrice" style="width:50px" placeholder="高"></el-input>
        </el-form-item>
        <el-form-item label="奖品分类">
          <el-select
            @focus="getBoxRewardTypeList"
            v-model="rewardquery.class_id"
            placeholder="请选择奖品分类"
            :loading="queryLoading"
          >
            <el-option label="全部" value="0"></el-option>
            <el-option
              v-for="item in queryOptioins"
              :key="item.id"
              :label="item.class_name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="rewardqueryAsk">筛选</el-button>
          <el-button @click="rewardqueryReset">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table
        ref="multipleTable"
        :header-cell-style="{background:'#eee'}"
        :data="boxRewardData"
        v-loading="rewardloading"
        border
        style="width: 100%;margin-bottom: 20px;"
        @selection-change="rewardhandleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column align="center" prop="id" label="ID"></el-table-column>
        <el-table-column align="center" prop="goods_name" label="奖品名称"></el-table-column>
        <el-table-column align="center" label="奖品图片">
          <template slot-scope="scope">
            <el-popover placement="top-start" title trigger="hover">
              <img :src="scope.row.img" alt style="max-width:150px" />
              <!-- <el-avatar shape="square" :size="150" fit="cover" :src="scope.row.img"></el-avatar> -->
              <el-avatar
                slot="reference"
                shape="square"
                :size="50"
                fit="scale-down"
                :src="scope.row.img"
              ></el-avatar>
              <!-- <img
                slot="reference"
                :src="scope.row.img"
                style="width: 60px;height: 60px"
              />-->
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="class_name" label="分类"></el-table-column>
        <el-table-column align="center" prop="y_price" label="原价"></el-table-column>
        <el-table-column align="center" prop="price" label="售价"></el-table-column>
        <el-table-column align="center" prop="address" label="预售/现货">
          <template slot-scope="scope">
            <div v-if="scope.row.type==1">预售</div>
            <div v-if="scope.row.type==2">现货</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="address" label="是否参与合成材料">
          <template slot-scope="scope">
            <div v-if="scope.row.is_compound==1">可以</div>
            <div v-if="scope.row.is_compound==0">不可以</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="compound_price" label="合成数值"></el-table-column>
      </el-table>
      <div style="text-align:right">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="rewardcurrentPage"
          :total="rewardtotal"
          @current-change="rewardcurrentChange"
        ></el-pagination>
      </div>

      <div style="margin-top:20px;text-align:right">
        <el-button type="primary" @click="rewardonSubmit">确定</el-button>
        <el-button @click="rewardsubCancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { giveList, addGive, delGiveInfo } from '@/api/marketing'
import { parseTime } from '@/utils/index'
import { consumerList } from '@/api/consumer'
import { boxRewardList, boxRewardTypeList } from '@/api/boxreward'

export default {
  name: 'BoutiqueGiveList',
  data() {
    return {
      baseApi: process.env.VUE_APP_BASE_API,
      // 分页数据
      total: 0,
      currentPage: 1,
      pageSize: 10,
      //query
      query: {
        keywords: '',
        add_time: '',
        status: '0',
        givetype: '0',
        timeArr: [],
        type: '0'
      },
      userId: '',
      tableData: [],
      activeName: '0',
      loading: false,
      picktime: '1',
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()])
            }
          },
          {
            text: '近半月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 15)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      // 抽屉
      drawer: false,
      direction: 'rtl',
      form: {
        user_id: '',
        type: '',
        data: '',
        in_type: '',
        give_type: '',
        bag_type: '1',
        bag_id: [],
        goods_data: []
      },
      username: '',
      usermobile: '',
      dialogVisible: false,
      sendData: [],
      // 用户分页数据
      sendTotal: 0,
      sendCurrentPage: 1,
      sendPageSize: 10,
      //sendquery
      sendQuery: {
        keywords: ''
      },

      // 奖品数据
      rewardtotal: 0,
      rewardcurrentPage: 1,
      rewardpageSize: 10,
      //query
      rewardquery: {
        keywords: '',
        class_id: '0',
        lowPrice: '',
        heightPrice: ''
      },
      priceArr: [],
      boxRewardData: [],
      rewardloading: false,
      queryOptioins: [],
      queryLoading: false,
      rewarddialogVisible: false,
      selectArr: [],
      del_data: []
    }
  },
  mounted() {
    this.getList()
  },
  activated() {
    this.total = 0
    this.currentPage = 1
    this.pageSize = 10
    this.query.add_time = ''
    this.query.keywords = ''
    this.query.status = ''
    this.picktime = 1
    this.query.timeArr = []
    this.getList()
  },
  methods: {
    del_goods(row) {
      this.form.goods_data = this.form.goods_data.filter(
        (res) => res.goods_id != row.goods_id
      )
      console.log(this.form.goods_data, row)

      // const arr = this.form.goods_data.filter((res) => res.id != row.id)
      // console.log(arr)
    },
    // 获取列表
    async getList() {
      this.loading = true
      console.log(this.query.timeArr)
      if (this.query.timeArr.length > 1) {
        this.query.add_time =
          parseTime(this.query.timeArr[0], '{y}-{m}-{d}') +
          ',' +
          parseTime(this.query.timeArr[1], '{y}-{m}-{d}')
      }

      const res = await giveList({
        page: this.currentPage,
        limit: this.pageSize,
        keywords: this.query.keywords,
        status: this.query.status,
        add_time: this.query.add_time,
        type: this.query.type,
        give_type: this.query.givetype
      })
      console.log(res)
      this.loading = false
      this.total = res.count
      this.tableData = res.data
      this.tableData.forEach((item) => {
        if (item.add_time == 0) {
          item.add_time = '-'
        } else {
          item.add_time = parseTime(item.add_time, '{y}-{m}-{d} {h}:{i}:{s}')
        }
        if (item.update_time == 0) {
          item.update_time = '-'
        } else {
          item.update_time = parseTime(
            item.update_time,
            '{y}-{m}-{d} {h}:{i}:{s}'
          )
        }
      })
    },
    queryAsk() {
      console.log(this.query)
      this.currentPage = 1
      this.getList()
    },
    queryReset() {
      this.total = 0
      this.currentPage = 1
      this.pageSize = 10
      this.query.add_time = ''
      this.query.keywords = ''
      this.query.status = ''
      this.picktime = 1
      this.query.timeArr = []
      this.getList()
    },
    //分页改变
    currentChange(current) {
      this.currentPage = current
      this.getList()
    },
    addList() {
      this.form = {
        user_id: '',
        type: '',
        data: '',
        in_type: '',
        give_type: '',
        bag_type: '1',
        bag_id: [],
        goods_data: []
      }
      this.drawer = true
    },
    // 抽屉
    handleClose(done) {
      this.form = {
        user_id: '',
        type: '',
        data: '',
        in_type: '',
        give_type: '',
        bag_type: '1',
        bag_id: [],
        goods_data: []
      }
      done()
    },
    async chooseUser() {
      this.dialogVisible = true
      await this.userList()
    },
    async onSubmit() {
      if (!this.form.user_id) {
        this.$message.error('请选择用户！')
        return
      } else if (!this.form.type) {
        this.$message.error('请选择赠送类型！')
        return
      } else if (this.form.type == '2' || this.form.type == '3') {
        if (!this.form.data) {
          this.$message.error('请输入赠送数量！')
          return
        } else if (!this.form.in_type) {
          this.$message.error('请选择加还是减！')
          return
        } else if (!this.form.give_type && this.form.type != '3') {
          this.$message.error('请选择充值类型！')
          return
        }
      } else if (this.form.type == '1') {
        if (!this.form.bag_type) {
          this.$message.error('请选择背包方式！')
          return
        } else if (!this.form.goods_data.length > 0) {
          this.$message.error('请选择商品！')
          return
        }
      }
      const res = await addGive({ ...this.form })
      if (res.st == 1) {
        this.$message({
          message: '添加成功',
          type: 'success'
        })
        this.getList()
        this.drawer = false
      } else {
        console.log(res)
        this.$message.error('添加失败！')
      }
    },
    onCancle() {
      this.form = {
        user_id: '',
        type: '',
        data: '',
        in_type: '',
        give_type: '',
        bag_type: '1',
        bag_id: [],
        goods_data: []
      }
      this.drawer = false
    },
    dialoghandleClose(done) {
      done()
    },
    //用户分页改变
    sendCurrentChange(current) {
      this.sendCurrentPage = current
      this.userList()
    },
    async userList() {
      const res = await consumerList({
        limit: this.sendPageSize,
        page: this.sendCurrentPage,
        keywords: this.sendQuery.keywords
      })
      console.log(res)
      this.sendData = res.data
      this.sendTotal = res.count
    },
    // 搜索列表
    rewarddialoghandleClose(done) {
      done()
    },
    sendQueryAsk() {
      console.log(this.sendQuery)
      this.sendCurrentPage = 1
      this.userList()
    },
    sendQueryReset() {
      this.resetForm('sendQuery')
      this.sendTotal = 0
      this.sendCurrentPage = 1
      this.sendPageSize = 10
      this.sendQuery.keywords = ''
      this.userList()
    },
    sendhandleSelectionChange(val) {
      this.form.user_id = val.id
      this.username = val.nickname
      this.usermobile = val.mobile
    },
    rewardsubCancel() {
      this.rewarddialogVisible = false
    },
    //分页改变
    async rewardcurrentChange(current) {
      this.rewardcurrentPage = current
      await this.getBoxRewardList()
      const select = []
      console.log(this.form.goods_data)
      if (this.form.goods_data) {
        this.form.goods_data.forEach((good) => {
          this.boxRewardData.forEach((item) => {
            if (good.goods_id == item.id) {
              select.push(item)
            }
          })
        })
      }
      this.toggleSelection(select)
    },
    // 添加奖品
    async addRewards() {
      this.rewarddialogVisible = true
      await this.getBoxRewardList()
      const select = []
      console.log(this.form.goods_data)
      if (this.form.goods_data) {
        this.form.goods_data.forEach((good) => {
          this.boxRewardData.forEach((item) => {
            if (good.goods_id == item.id) {
              select.push(item)
            }
          })
        })
      }
      this.toggleSelection(select)
    },
    //获取奖品列表
    async getBoxRewardList() {
      this.rewardloading = true
      const res = await boxRewardList({
        page: this.rewardcurrentPage,
        limit: this.rewardpageSize,
        class_id: this.rewardquery.class_id,
        price: this.priceArr,
        keywords: this.rewardquery.keywords
      })
      this.rewardloading = false
      console.log(res)
      this.rewardtotal = res.count
      this.boxRewardData = res.data
    },
    //获取奖品分类列表
    async getBoxRewardTypeList() {
      this.queryLoading = true
      const res = await boxRewardTypeList({
        page: '1',
        limit: '999',
        keywords: ''
      })
      this.queryLoading = false
      console.log(res)
      this.queryOptioins = res.data
    },
    // 搜索列表
    rewardqueryAsk() {
      // 不可以一个有值一个没值
      if (!this.rewardquery.lowPrice && !this.rewardquery.heightPrice) {
        console.log(this.rewardquery)
        this.currentPage = 1
        this.getBoxRewardList()
      } else if (this.rewardquery.lowPrice && this.rewardquery.heightPrice) {
        this.priceArr = [
          this.rewardquery.lowPrice,
          this.rewardquery.heightPrice
        ]
        console.log(this.rewardquery)
        this.currentPage = 1
        this.getBoxRewardList()
      } else if (!this.rewardquery.lowPrice || !this.rewardquery.heightPrice) {
        this.$message.error('请输入价格区间')
      }
    },
    rewardqueryReset() {
      this.resetForm('query')
      this.total = 0
      this.currentPage = 1
      this.pageSize = 10
      this.query.keywords = ''
      this.query.type = '0'
      this.getBoxRewardList()
    },
    // 选择奖品
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    // 奖品列表
    rewardhandleSelectionChange(val) {
      //已经有的不添加
      const aIds = new Set(this.selectArr.map((item) => item.id))
      val.forEach((item) => {
        if (!aIds.has(item.id)) {
          this.selectArr.push(item)
        }
      })
    },
    rewardonSubmit() {
      console.log(this.form.goods_data)
      const aIds = new Set(this.form.goods_data.map((item) => item.goods_id))
      this.selectArr.forEach((item) => {
        if (!aIds.has(item.id)) {
          const dx = {
            goods_id: item.id,
            rule_id: '',
            sort: '',
            num: '0',
            win_type: '-1',
            stage_start: '0',
            stage_end: '0',
            img: item.img,
            goods_name: item.class_name,
            price: item.price,
            id: '0'
          }
          if (this.form.goods_data.length == 0) {
            dx.sort = 0
          } else {
            console.log(this.form.goods_data[0].sort)
            dx.sort = Number(this.form.goods_data[0].sort) + 1
          }
          this.form.goods_data.unshift(dx)
        }
      })
      console.log(this.form.goods_data)
      this.rewarddialogVisible = false
    },
    async getDelInfo(id) {
      const res = await delGiveInfo({ id: id })
      console.log(res)
      this.del_data = res.data
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.query-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
}
.box-card {
  margin-bottom: 20px;
}
::v-deep .el-drawer.rtl {
  width: 650px !important;
  overflow: auto;
}
.query-card {
  ::v-deep .el-form {
    display: flex;
  }
}

::v-deep .el-drawer.rtl {
  padding-bottom: 20px;
  width: 1000px !important;
  overflow: auto;
}
</style>